<template>
    <h2>投资项目信息显示列表</h2>
    项目名称:<input type="text" placeholder="请输入项目名称" v-model="SearchInfo.Iname"> 
    项目总金额:<input type="text" placeholder="请输入项目最小投资金额" v-model="SearchInfo.MinBudget">-<input type="text" placeholder="请输入项目最大投资金额" v-model="SearchInfo.MaxBudget">
    <input type="button" value="查询" @click="LoadData" class="btn btn-success">
    <table class="table table-bordered" border="1">
        <thead>
        <tr style="background-color: aqua;">
            <td>投资项目编号</td>
            <td>投资项目名称</td>
            <td>投资项目总金额</td>
            <td>已投资额度</td>
            <td>剩余投资金额</td>
            <td>投资次数</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in invests">
            <td>{{item.I_Id}}</td>
            <td>{{item.I_Name}}</td>
            <td>{{item.I_Budget}}</td>
            <td>{{item.I_Receive}}</td>
            <td>{{item.I_Residue}}</td>
            <td>{{item.I_Number}}</td>
            <td>操作</td>
            </tr>
        </tbody>
    </table>
    <span>
        当前共{{ pageInfo.totalCount }}条，共有{{ pageInfo.pageCount}}页,每页共{{ pageInfo.pSize}}条，当前第{{ pageInfo.pIndex}}/{{pageInfo.pageCount}}页
        <a href="#" @click="pageLoadInfo('F')">首页</a>
        <a href="#" @click="pageLoadInfo('U')">上一页</a>
        <a href="#" @click="pageLoadInfo('N')">下一页</a>
        <a href="#" @click="pageLoadInfo('E')">尾页</a>
    </span>
    <select v-model=pageInfo.Cindex @change="DropStrip">
        <option value="1">1条/页</option>
        <option value="2" checked>2条/页</option>
        <option value="3">3条/页</option>
    </select>
    <input type="text" style="width: 40px;" v-model="pageInfo.NewIndex" >
    <input type="button" value="跳转" @click="Jump">
    </template>
    
    <script setup lang="ts">
    import axios from 'axios';
    import { onMounted, ref} from 'vue';
    //创建生命周期函数
    onMounted(()=>{
        LoadData();
    })
    //下拉框事件
    const DropStrip =()=>{
    pageInfo.value.pSize=pageInfo.value.Cindex;
    LoadData();
    }
    //跳转到指定页面
    const Jump=()=>{
        //1.接受用户在文本框输入的数据
        const Nindex=pageInfo.value.NewIndex;
        //2.判断输入的数据是否为空
        if(Nindex==""){
            alert("请输入跳转页码");
            pageInfo.value.NewIndex="";
            return;
        }
        //3.判断输入的数据是否为数字
        if(isNaN(Number(Nindex))){
            alert("请输入数字");
            pageInfo.value.NewIndex="";
            return;
        }
        //4.判断输入的数据是否在合理范围内
        if((Number(Nindex))<1||(Number(Nindex))>pageInfo.value.pageCount){
            alert("请输入合理的页码");
            pageInfo.value.NewIndex="";
            return;
        }
        pageInfo.value.pIndex=Number(Nindex);
        LoadData();
    }
    //创建响应式数据（用户数据加载）
    const invests = ref([{
        I_Id:0,
        I_Name:"",
        I_Budget:0,
        I_Receive:0,
        I_Residue:0,
        I_Number:0
    }])
    //用于查询
    const SearchInfo =ref({
        Iname:"",
        MinBudget:"",
        MaxBudget:""
    })
    //用于保存分页信息
    const pageInfo = ref({
        pIndex:1, //当前页码
        pSize:2,     //每页显示条数
        totalCount:0,  //总记录数
        pageCount:0, //总页数
        Cindex:2, //总页数
        NewIndex:""//下拉框输入跳转页码
    })


    
    //定义获取投资项目信息的方法
    const LoadData=()=>{
        axios.get("http://localhost:58758/api/Invest/ShowInvest",
        {
            params:{
                I_Name:SearchInfo.value.Iname,
                MinIbudget:SearchInfo.value.MinBudget,
                MaxInbudget:SearchInfo.value.MaxBudget,
                pageIdex:pageInfo.value.pIndex,
                pageSize:pageInfo.value.pSize
            }
        })
        .then(res=>{
            invests.value=res.data.List;
            //依次将数据总数 总页数赋值
            pageInfo.value.totalCount=res.data.totalCount;
            pageInfo.value.pageCount=res.data.pageCount;
            console.log(res.data);
        })
        .catch(err=>{
            console.log(err);   
        })
    }
    //完成分页功能
    const pageLoadInfo=(choose:string)=>{
        switch(choose){
            case "F":
            pageInfo.value.pIndex=1;
            break;
            case "U":
            if(pageInfo.value.pIndex>1){
                pageInfo.value.pIndex--;
            }else{
                alert("当前已经是第一页了")
                return;
            }
            break;
            case "N":
            if(pageInfo.value.pIndex<pageInfo.value.pageCount){
                pageInfo.value.pIndex++;
            }else{
                alert("当前已经是最后一页了")
            }
            break;
            case "E":
            pageInfo.value.pIndex=pageInfo.value.pageCount;
            break;
            
        }
        LoadData();
    }
    
    
    </script>